/***
* @author: Nonlinear_fish
* @date:2025-02-15.17:29
* @description:该模块为一个展示新发布的比赛的列表，包括一些基本信息但要少于contestDetail，
*/
<script setup>
import {defineProps, onMounted, ref,} from 'vue'
import CTask from "@/components/components/cTask.vue";
import PTask from "@/components/components/pTask.vue";
import VTask from "@/components/components/vTask.vue";

const props = defineProps({
  data: Object,
  role: Number
})

onMounted(() => {
  console.log(props.data)
})

const typeList = ["", "横向课题", "纵向课题", "论文"]

const openMsg = ref(false);

const visible = ref(false);

const Msg = (props.data.info.msg == null ? null : props.data.info.msg);
// const Msg = "写的什么东西"
</script>

<template>
  <div >
    <div class="title">
      <h1 style="margin-top: 0; margin-bottom: 0;">RNO: {{props.data.rno}}</h1>
    </div>
    <div class="detailLess" @click="visible = true">
      <a-card v-if="props.data.review === 0" :bordered="false" style=" width: 0.5rem; margin: 0; background-color: #48535F"></a-card>
      <a-card v-else-if="props.data.review > 0" :bordered="false" style=" width: 0.5rem; margin: 0; background-color: #84f806"></a-card>
      <a-card v-else-if="props.data.review < 0" :bordered="false" style=" width: 0.5rem; margin: 0; background-color: #f10505"></a-card>
      <div class="card">
        <p>ID: {{props.data.id}}</p>
        <p>Creat Time: {{props.data.createTime}}</p>
        <p>Type: {{typeList[props.data.type]}}</p>
        <p v-if="props.data.review === 0" >Status: Waiting</p>
        <p v-else-if="props.data.review > 0" >Status: Accepted</p>
        <p v-else-if="props.data.review < 0" >Status: Rejected</p>
      </div>
      <div  @click.stop="openMsg = !openMsg" v-if="props.data.review < 0" class="rejectCard">
        <a-card :bordered="false" style="display: flex; width: 4rem; margin: 0; background-color: #f10505">
          <h3>新</h3>
          <h3>消</h3>
          <h3>息</h3>
        </a-card>
        <a-modal :footer="null" v-model:open="openMsg" title="Reject Msg">
          <text>
            {{Msg}}
<!--            {{props.data.info.msg}}-->
          </text>
        </a-modal>
      </div>
      <div>
        <a-modal :footer="null" v-model:open="visible" title="Detail" @ok="handleOk">
          <div v-if="props.data.type === 1">
            <c-task :data="props.data" :role="props.role"></c-task>
          </div>
          <div v-if="props.data.type === 2">
            <v-task :data="props.data" :role="props.role"></v-task>
          </div>
          <div v-if="props.data.type === 3">
            <p-task :data="props.data" :role="props.role"></p-task>
          </div>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<style scoped>
.title{
  text-align: left;
  color: #9AA4B1;
  font-size: 1.5rem;
}
.detailLess {
  width: 100%;
  margin: 0.2rem;
  display: flex;

  .card{
    border-radius: 10px;
    padding: 2%;
    width: 95%;
    text-align: left;
    color: #9AA4B1;
  }
}
</style>